<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }
        .capsule {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 87px;
            height: 30px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="capsule"></div>
    <div class="pb-20">
        <!-- 用户信息 -->
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
            <div class="flex items-center">
                <div class="w-16 h-16 rounded-full bg-white flex items-center justify-center">
                    <i class="ri-user-line text-3xl text-blue-500"></i>
                </div>
                <div class="ml-4 text-white">
                    <h2 class="text-xl font-semibold">张三</h2>
                    <p class="text-sm opacity-80">ID: 138****8888</p>
                </div>
                <div class="ml-auto">
                    <button class="text-white">
                        <i class="ri-settings-3-line text-xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 会员信息 -->
        <div class="bg-white p-4 mx-4 -mt-6 rounded-xl shadow-sm">
            <div class="flex justify-between items-center">
                <div>
                    <p class="text-sm text-gray-500">会员等级</p>
                    <p class="text-lg font-semibold">普通会员</p>
                </div>
                <div class="w-24 h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div class="w-1/3 h-full bg-blue-500"></div>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-500">距离升级</p>
                    <p class="text-lg font-semibold">¥1000</p>
                </div>
            </div>
        </div>

        <!-- 功能菜单 -->
        <div class="mt-6 bg-white p-4">
            <div class="grid grid-cols-4 gap-4">
                <div class="text-center">
                    <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-blue-50 flex items-center justify-center">
                        <i class="ri-time-line text-blue-500 text-xl"></i>
                    </div>
                    <span class="text-sm">待取车</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-blue-50 flex items-center justify-center">
                        <i class="ri-car-line text-blue-500 text-xl"></i>
                    </div>
                    <span class="text-sm">使用中</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-blue-50 flex items-center justify-center">
                        <i class="ri-check-line text-blue-500 text-xl"></i>
                    </div>
                    <span class="text-sm">已完成</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-blue-50 flex items-center justify-center">
                        <i class="ri-history-line text-blue-500 text-xl"></i>
                    </div>
                    <span class="text-sm">浏览记录</span>
                </div>
            </div>
        </div>

        <!-- 设置选项 -->
        <div class="mt-6 bg-white">
            <div class="divide-y divide-gray-100">
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="ri-file-list-line text-gray-400 mr-2"></i>
                        <span>我的订单</span>
                    </div>
                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                </div>
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="ri-shield-check-line text-gray-400 mr-2"></i>
                        <span>实名认证</span>
                    </div>
                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                </div>
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="ri-customer-service-line text-gray-400 mr-2"></i>
                        <span>联系客服</span>
                    </div>
                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                </div>
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="ri-question-line text-gray-400 mr-2"></i>
                        <span>帮助中心</span>
                    </div>
                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                </div>
                <div class="p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <i class="ri-settings-3-line text-gray-400 mr-2"></i>
                        <span>设置</span>
                    </div>
                    <i class="ri-arrow-right-s-line text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 退出登录 -->
        <div class="mt-6 p-4">
            <button class="w-full py-3 rounded-lg bg-red-500 text-white">
                退出登录
            </button>
        </div>
    </div>
</body>
</html>
